<script setup>
import { ref } from 'vue'
import SunComponent from '@/components/SunComponent.vue'
import GeneralButton from '@/components/GeneralButton.vue'
import LoginBox from '@/components/LoginBox.vue'
import WarnIcon from '@/components/icons/WarnIcon.vue'
import LadderIcon from '@/components/icons/LadderIcon.vue'
import Driver from '@/assets/images/driver.png'
import BackgroundImage from '@/components/BackgroundImage.vue'

const showLoginBox = ref(false)
</script>
<template>
  <div class="container">
    <background-image />
    <sun-component class="sun" />
    <div class="center">
      <div class="train">
        <div class="engine-front">
          <div class="chimney">
            <div class="smoke"></div>
            <div class="smoke smoke-2"></div>
            <div class="smoke smoke-3"></div>
            <div class="smoke smoke-4"></div>
          </div>
        </div>
        <div class="engine-body"></div>
        <div class="compartment fuel-compartment">
          <warn-icon :size="48" />
          <ladder-icon :size="60" />
        </div>
        <div class="compartment wagon-compartment">
          <div class="compartment-window"></div>
        </div>
        <div class="compartment tail-compartment">
          <div class="compartment-no-window"></div>
          <div class="tail"></div>
        </div>
        <div class="wheel-holder">
          <div class="wheel"></div>
          <div class="wheel wheel-2">
            <div class="wheel-joint"></div>
            <div class="wheel-joint wheel-joint-2"></div>
          </div>
          <div class="wheel wheel-3"></div>
          <div class="wheel wheel-4"></div>
          <div class="wheel wheel-5"></div>
          <div class="wheel wheel-6"></div>
          <div class="wheel wheel-7"></div>
          <div class="wheel wheel-8"></div>
          <div class="wheel wheel-9"></div>
        </div>
      </div>
      <div class="bridge"></div>
      <img :src="Driver" class="driver-img" />
    </div>
    <general-button class="login-button" @click="showLoginBox = true">
      用 户<br />登 录
    </general-button>
  </div>
  <login-box v-model:showLoginBox="showLoginBox" />
</template>
<style scoped>
@import '@/styles/base-train.css';

.sun {
  top: 10%;
  left: 20%;
  position: absolute;
}

.driver-img {
  position: absolute;
  width: 16rem;
  height: auto;
  bottom: 10%;
  left: 10%;
  z-index: 100;
}

.login-button {
  position: absolute;
  bottom: 15%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
}
</style>
